<style lang="less">
	page{
		background: #f6f6f6;
	}
	.container {
		text-align: center;
	}
   
   .uni-form-item{
	   padding-top: 20upx;
   }
   .uni-column{
	  // position: fixed;
	  //  top: 0;
	  //  left: 0;
	   width: 100%;
	   background: #FFFFFF;
	   z-index: 100;
   }
   .with-fun{
	   width:calc(100% - 242upx);
	   border: 1px solid #CCCCCC;
	   border-radius: 10upx;
	   margin-left: 30upx;
	   padding: 10upx;
   }
   .uni-input{
	   padding: 0;
	   height: 40upx;
	   line-height: 40upx;
	   text-align: left;
	   box-sizing: border-box;
	   padding: 0 20upx;
   }
  
   
   .sousuo{
	   position: absolute;
	   right: 30upx;
	   top: 20upx;
	   width:142upx;
	   background:rgba(50,47,44,1);
	   padding: 7upx 0;
	   border-radius: 4upx;
	   image{
		   width: 32upx;
		   height: 32upx;
	   }
   }
   .search_close{
	   width: 34upx;
	   height: 34upx;
	   margin-right: 12upx;
   }
 
   .time{
	   overflow: hidden;
	   padding-bottom: 20upx;
	   margin-top: 40upx;
	   -moz-box-shadow: 0upx 10upx 6upx #eee;
		-webkit-box-shadow: 0upx 10upx 6upx #eee;
		box-shadow: 0upx 10upx 6upx #eee;
		image{
			width: 20upx;
			margin-left: 10upx;
		}

   }
   .time view{
	   float: left;
	   width: 50%;
	   text-align: center;
	   font-size:26upx;
		font-weight:bold;
		color:rgba(51,51,51,1);
   }
   .select{
   	   width: 80%;
   	   display: block;
   	   margin: 10upx auto;
   	   outline: none;
   }
   .select option{
   	    outline: none;
   		display: inline-block;
   		width: 100%;
   }
   .zhao{
	   position: fixed;
	   left: 0;
	   top: 0;
	   bottom: 0;
	   right: 0;
	   background: #000000;
	   opacity: 0.4;
	   z-index: 999;
   }
   .popup{
	   width: 100%;
	   position: fixed;
	   bottom: 0;
	   left: 0;
	   z-index: 1000;
   }
   .popup_phone{
	   padding: 0 30upx 50upx;
	   .popup_phone_list{
		   width: 100%;
		   margin-top: 20upx;
		   padding: 36upx 0;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		   background-color: #FFFFFF;
		   border-radius: 46upx;
		   .popup_phone_list_img{
			   width: 16upx;
			   height: 22upx;
			   margin-right: 20upx;
		   }
		   text{
			   font-size: 26upx;
			   font-weight: 600;
			   line-height: 26upx;
			   font-family: "DINCond";
			   color: #0099CC;
		   }
	   }
   }
   .btns_item{
   			margin-left: 16upx;
   			border: 1upx solid #333333;
   			border-radius: 30upx;
   			font-size:20upx;
   			font-family:'DINCond';
   			font-weight:400;
   			color: #333333;
   			line-height:20upx;
   			padding: 8upx 16upx 8upx 12upx;
   			&:first-of-type{
   				margin-left: 0;
   			}
   		}
   		.phone{
   			background: url('https://static.xpandago.net/wechat/images/h5TeamPhone.png') no-repeat 12upx center/ 16upx 20upx;
   			padding-left: 36upx;
   		}
   		.wexin{
   			background: url('https://static.xpandago.net/wechat/images/h5TeamPhoneWeixin.png') no-repeat 12upx center/ 24upx 20upx;
   			padding-left: 46upx;
   		}
   .main{
	   padding: 30upx;
	   box-sizing: border-box;
	   .main_list{
	   	   width: 100%;
	   	   background: #FFFFFF;
	   	   border-radius: 12upx;
		   margin-bottom: 26upx;
	   }
   }
   .main_head{
	   padding: 34upx;
	   box-sizing: border-box;
	   display: flex;
	   align-items: center;
	   .head_fl_img{
		   width: 100upx;
		   height: 100upx;
		   border: 50%;
		   margin-right: 20upx;
	   }
	   .main_head_fr{
	   		flex: 1;
	   }
	   .main_head_top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
		&:last-of-type{
			margin-bottom: 0;
		}
		.username{
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 36upx;
		}
		.store{
			font-size: 24upx;
			font-weight: 500;
			color: #999999;
			line-height: 26upx;
		}
		.grade{
			padding: 8upx 20upx;
			font-size: 20upx;
			font-weight: 400;
			color: #DBC291;
			line-height: 26upx;
			border: 1upx solid #DBC291;
			border-radius: 30upx;
		}
		.head_btns{
			display: flex;
			align-items: center;
			.btns_item{
				margin-left: 16upx;
				border: 1upx solid #333333;
				border-radius: 30upx;
				font-size:20upx;
				font-family:'DINCond';
				font-weight:400;
				color: #333333;
				line-height:20upx;
				padding: 8upx 16upx 8upx 12upx;
				&:first-of-type{
					margin-left: 0;
				}
			}
			.phone{
				background: url('../../static/img/h5TeamPhone.png') no-repeat 12upx center/ 16upx 20upx;
				padding-left: 36upx;
			}
			.wexin{
				background: url('../../static/img/h5TeamPhoneWeixin.png') no-repeat 12upx center/ 24upx 20upx;
				padding-left: 46upx;
			}
		}
	   }
   }
   .main_content{
	   display: flex;
	   flex-wrap: wrap;
	   .main_item{
		   padding: 26upx 0;
		   width: 25%;
		   box-sizing: border-box;
		   border-top: 1upx solid #EDEDED;
		   border-right: 1upx solid #EDEDED;
		   &:nth-of-type(4n){
			   border-right: none;
		   }
		   .main_item_num{
			   font-size: 40upx;
			   font-family: "DINCond";
			   font-weight: 400;
			   color: #333333;
			   line-height: 48upx;
		   }
		   .main_item_txt{
			   font-size: 20upx;
			   font-weight: 500;
			   color: #999999;
			   line-height: 36upx;
		   }
		   .name{
				font-size:24upx;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:29upx;
				margin: 20upx 0;
			}
	   }
   }
</style>
<template>
	<view class="container">
		 <view class="uni-form-item uni-column">
		 	<view class="with-fun">
		 		<input class="uni-input" placeholder="请输入搜索内容" maxlength="20" :value="inputClearValue" @input="clearInput" />
				<image src="https://static.xpandago.net/wechat/images/search_closed%402x.png" class="search_close" v-if="showClearIcon" @click="clearIcon" mode="widthFix"></image>
		 	</view>
			<view class="sousuo" @click="seek">
				<image src="/static/img/search_iconss@2x.png" mode="widthFix"></image>
			</view>
			<view class="time">
				<view class="time_select">
					<select class="select" v-model="indexTime" @change="getCouponSelectedOne">
						<option v-for="(x,i) in sortStr" v-bind:value="x.indexTime" :key="i">{{x.name}}</option>
					</select>
				</view>
			</view>
		 </view>
		<view class="main">
			<view class="main_list" v-for="(item,index) in list" :key="index">
				<view class="main_head">
					<image :src="http + item.headIco" mode="widthFix" v-if="item.headIco != '' && item.headIco != null" class="head_fl_img" :webp="true"></image>
					<image src="https://static.xpandago.net/wechat/images/logo.png?x-oss-process=style/face-middle"
						class="head_fl_img" mode="widthFix" v-else></image>
					<view class="main_head_fr">
						<view class="main_head_top">
							<view class="username">{{item.username}}</view>
							<view class="store" v-if="memberType == 'serviceProvider'" @tap="openMemberDetail(item.userId)">店铺信息  ></view>
						</view>
						<view class="main_head_top">
							<view class="grade" v-if="item.shopType != '' && item.shopType != null">{{item.shopType}}</view>
							<view class="grade">{{item.memberTypeStr}}</view>
							<view class="head_btns">
								<view class="btns_item phone" @tap="openpopupPhone(item.areaCode,item.mobile)">电话</view>
								<view class="btns_item wexin" @tap="openWinXin(item.mobile)">微信</view>
							</view>
						</view>
					</view>
				</view>
				<view class="main_content" v-if="memberType == 'serviceProvider' || memberType == 'storeManager'">
					<view class="main_item" v-if="memberType == 'serviceProvider'">
						<view class="main_item_num">{{item.teamStoreManagerNum}}</view>
						<view class="main_item_txt">店长数量</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.teamBigNum}}</view>
						<view class="main_item_txt">88VIP</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.teamMiddleNum}}</view>
						<view class="main_item_txt">92VIP</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.teamSmallNum}}</view>
						<view class="main_item_txt">95VIP</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.teamGeneralNum}}</view>
						<view class="main_item_txt">注册会员</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.monthlySales}}</view>
						<view class="main_item_txt">本月销售额</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.monthlyCount}}</view>
						<view class="main_item_txt">本月订单数</view>
					</view>
					<navigator open-type="navigate" :url="'/pages/browse/browse?otherUserId=' + item.userId" class="main_item">
						<view class="name">浏览记录></view>
					</navigator>
					<view class="main_item" v-if="memberType == 'storeManager'"></view>
				</view>
				<view class="main_content" v-else>
					<view class="main_item">
						<view class="main_item_num">{{item.monthlySales}}</view>
						<view class="main_item_txt">本月销售额</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.monthlyCount}}</view>
						<view class="main_item_txt">本月订单数</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.grandSales}}</view>
						<view class="main_item_txt">累计销售额</view>
					</view>
					<view class="main_item">
						<view class="main_item_num">{{item.grandCount}}</view>
						<view class="main_item_txt">累计订单数</view>
					</view>
					<navigator open-type="navigate" :url="'/pages/browse/browse?otherUserId=' + item.userId" class="main_item">
						<view class="name">浏览记录></view>
					</navigator>
					<view class="main_item"></view>
					<view class="main_item"></view>
					<view class="main_item"></view>
				</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
		<view class="zhao" v-if="hidden"></view>
		<view class="popup" v-if="hidden">
			<view class="popup_phone" v-if="popupFlag == 1">
				<view class="popup_phone_list" @tap="openPhone">
					<image src='https://static.xpandago.net/wechat/images/h5TeamPhone.png' class="popup_phone_list_img"></image>
					<text>呼叫 {{mobile}}</text>
				</view>
				<view class="popup_phone_list" @tap="cancelPhone">
					<text>取消</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	import webView from '@/common/webView'
	export default {
		data() {
			return {
				// fansFlag:'', // 判断是xpa   公众号
				// areaCode:'',
				bambooTaskId:'',
				http:api.httpImg,
				mobile:'',
				popupFlag: 1,
				hidden: false,
				list:[],
				loadMoreText: "加载中...",
				showLoadMore: true,
				inputClearValue: '',
				showClearIcon: false,
				totalPage:'',//总页数
				page:1,
				memberType:'',//级别
				sortStrType:'timeDesc',
				sortStr:[
					{name:"注册时间（倒序）",indexTime: 'timeDesc'},
					{name:"注册时间（正序）",indexTime: 'timeAsc'},
					{name:"累计积分",indexTime: 'point'},
					{name:"团队人数",indexTime: 'teamNum'},
					{name:"团队95VIP人数",indexTime: 'teamSmallNum'},
					{name:"团队92VIP人数",indexTime: 'teamMiddleNum'},
					{name:"团队88VIP人数",indexTime: 'teamBigNum'}
				],
			  indexTime:"",
			  token:"",
			  userId:"",
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.type != '' && options.type != null && options.type != undefined){
				// memberDetail跳转过来
				if(options.memberType != '' && options.memberType != null && options.memberType != undefined){
					this.memberType = options.memberType
					let tit = ''
					if (this.memberType == 'serviceProvider'){
						tit = '服务商'
					}else if (this.memberType == 'storeManager'){
						tit = '店长'
					}else if (this.memberType == 'big'){
						tit = '88VIP'
					}else if (this.memberType == 'middle'){
						tit = '92VIP'
					}else if (this.memberType == 'small'){
						tit = '95VIP'
					}else if (this.memberType == 'general'){
						tit = '注册会员'
					}
					uni.setNavigationBarTitle({
					　　title: tit
					})
				}
				// newData跳转过来
				if(options.userId != '' && options.userId != null && options.userId != undefined){
					uni.setNavigationBarTitle({
					　　title: '客户明细'
					})
					this.userId = options.userId
				}
				this.token = uni.getStorageSync('token')
				this.indexTime = this.sortStr[0].indexTime;
				this.myGroup(this.page,this.inputClearValue)
			}else{
				// 链接跳转
				uni.setNavigationBarTitle({
				　　title: '客户明细'
				})
				this.userId = this.getQueryVariable('userId')
				this.bambooTaskId = this.getQueryVariable('bambooTaskId')
				let token = this.getQueryVariable('token')
				this.token = token
				uni.setStorageSync('token', token);
				this.indexTime = this.sortStr[0].indexTime;
				this.markTask()
				this.myGroup(this.page,this.inputClearValue)
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.page=1;
			 this.list = [];
			this.myGroup(this.page,this.inputClearValue);
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		onReachBottom() {
			this.showLoadMore = true;
			if (this.page >= this.totalPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				setTimeout(() => {
					this.page++
					this.myGroup(this.page,this.inputClearValue);
				}, 300);
			}
		},
		methods: {
			//获取token与id
			getQueryVariable(variable){
			   var query = window.location.search.substring(1);
			   var vars = query.split("&");
			   for (var i=0;i<vars.length;i++) {
					   var pair = vars[i].split("=");
					   if(pair[0] == variable){return pair[1];}
			   }
			   return(false);
			},
			openMemberDetail(userId){
				uni.navigateTo({
					url:'/pages/newData/memberDetail?teamsFlag=1&userId=' + userId
				})
			},
			//打开微信
			openWinXin(mobile){
				let that=this
			  uni.setClipboardData({
				data:mobile,
				success (res) {
				  uni.showToast({
					title: '复制成功',
					icon:"none"
				  })
				  that.openGoods()
				}
			  })
			  
			},
			//返回app
			openGoods() {
				const userStr = navigator.userAgent
				let that=this
				if (userStr.indexOf('Android') !== -1) {
				 let params={type:'openWeChat'}
				 window.Android.showInfoFromJs(JSON.stringify(params))
				} else {
				  webView.callhandler('openWeChat', {}, (data) => {
				  })
				}
			},
			//  拨打电话
			openPhone(){
				uni.makePhoneCall({
					phoneNumber: this.mobile,
					success:() => {
						if(Boolean(this.bambooTaskId) != false){
							this.sureTask()
						}
						console.log('调用成功')
					},
					fail(){
						console.log("调用失败")
					}
				})
			},
			//  打开电话弹窗
			openpopupPhone(areaCode,mobile){
				// this.areaCode = areaCode
				this.mobile = areaCode + mobile
				this.hidden = true
				this.popupFlag = 1
			},
			cancelPhone(){
				this.hidden = false
			},
			async myGroup(page,username){
					const [err, res] = await api.myGroup({
						query:{
							page:page,
							limit:10,
							keyword:username,
							memberType:this.memberType,
							sortStr:this.sortStrType,
							userIdList:this.userId
						},
						 header:{
							'Content-Type': 'application/json',
							'token': this.token
						 }
					 });
					 if(res.data.code == 0){
						 if(res.data.data.list!=null){
							this.list = [...this.list, ...res.data.data.list];
						 }
						 this.totalPage=res.data.data.totalPage
						 if(this.list.length==0){
							 this.loadMoreText = "暂无数据!"
							 this.showLoadMore = true;
						 }else{
							this.showLoadMore = false; 
						 }
					 }else{
						 uni.showToast({
							title: res.data.msg,
							icon: 'none'
						 })
						// if(res.data.code==200){
						// 	uni.removeStorageSync('token');
						// 	setTimeout(() => {
						// 		uni.reLaunch({
						// 		  url: "/pages/login/loginWechat"
						// 		})
						// 	}, 1000);
						// }	
					 }
			},
			// 标记竹叶任务，日常任务需要先标记以后才能完成
			async markTask(){
					const [err, res] = await api.markTask({
						query:{
							bambooTaskId: this.bambooTaskId,
						},
						 header:{
							'Content-Type': 'application/json',
							'appver':'2.5.0',
							'token': this.token
						 }
					 });
					 if(res.data.code == 0){
						 
					 }else{
						 uni.showToast({
							title: res.data.msg,
							icon: 'none'
						 })
					 }
			},
			// 完成竹叶任务，参数决定是否完成分享素材任务
			async sureTask(){
					const [err, res] = await api.sureTask({
						query:{
							bambooTaskId: this.bambooTaskId,
						},
						 header:{
							'Content-Type': 'application/json',
							'appver':'2.5.0',
							'token': this.token
						 }
					 });
					 if(res.data.code == 0){
						 
					 }else{
						 uni.showToast({
							title: res.data.msg,
							icon: 'none'
						 })
					 }
			},
			clearInput: function(event) {
				this.inputClearValue = event.target.value;
				if (event.target.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			//搜索
			seek(){
				this.page=1;
				 this.list = [];
				this.myGroup(this.page,this.inputClearValue);
			},
			//排序
			getCouponSelectedOne(){
				this.sortStrType=this.indexTime
				this.page=1;
				this.list = [];
				this.myGroup(this.page,this.inputClearValue)
			},
		}
	}
</script>
